<%@ page import="pro4.CartItem, java.util.List" %>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <title>我的购物车</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      margin: 40px;
      background-color: #f9f9f9;
    }
    h1 {
      color: #333;
    }
    table {
      width: 100%;
      border-collapse: collapse;
      background-color: white;
      box-shadow: 0 0 10px rgba(0,0,0,0.1);
      margin-bottom: 30px;
    }
    th, td {
      padding: 12px;
      text-align: left;
      border-bottom: 1px solid #ddd;
    }
    th {
      background-color: #f2f2f2;
    }
    img {
      max-width: 80px;
      height: auto;
    }
    .quantity-input {
      width: 60px;
    }

    .cart-footer {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 10px 0;
      background-color: #fff;
      border-top: 1px solid #ddd;
    }

    .select-all-group {
      display: flex;
      align-items: center;
      gap: 10px;
    }

    .checkout-button {
      padding: 10px 20px;
      background-color: #e91e63;
      color: white;
      border: none;
      cursor: pointer;
      font-size: 16px;
      border-radius: 5px;
      margin-left: 10px;
    }

    .checkout-button[disabled] {
      background-color: #ccc;
      cursor: not-allowed;
    }

    .continue-shopping {
      display: inline-block;
      padding: 10px 20px;
      background-color: #007bff;
      color: white;
      text-decoration: none;
      border-radius: 5px;
      font-size: 16px;
    }

    .continue-shopping:hover {
      background-color: #0056b3;
    }

    .total-price {
      font-weight: bold;
      color: #e91e63;
    }
  </style>
</head>
<body>
<h1>我的购物车</h1>

<%
  List<CartItem> cartItems = (List<CartItem>) session.getAttribute("cartItems");
  double totalAmount = 0.0;

  if (cartItems != null && !cartItems.isEmpty()) {
    // 计算总价
    for (CartItem item : cartItems) {
      totalAmount += item.getTotalPrice();
    }
%>
<table>
  <thead>
  <tr>
    <th></th>
    <th>商品图片</th>
    <th>名称</th>
    <th>单价</th>
    <th>数量</th>
    <th>小计</th>
    <th>操作</th>
  </tr>
  </thead>
  <tbody>
  <% for (int i = 0; i < cartItems.size(); i++) {
    CartItem currentItem = cartItems.get(i); // 修改为 currentItem，避免冲突
    double subtotal = currentItem.getTotalPrice();
  %>
  <tr>
    <td><input type="checkbox" name="item_<%= i %>" value="<%= i %>"></td>
    <td><img src="<%= currentItem.getProduct().getImageUrl() %>" alt="商品图片" width="80"></td>
    <td><%= currentItem.getProduct().getName() %></td>
    <td>¥<%= String.format("%.2f", currentItem.getProduct().getPrice()) %></td>
    <td>
      <form action="UpdateCartServlet" method="post">
        <input type="hidden" name="action" value="decrease">
        <input type="hidden" name="index" value="<%= i %>">
        <button type="submit">-</button>
      </form>
      <%= currentItem.getQuantity() %>
      <form action="UpdateCartServlet" method="post">
        <input type="hidden" name="action" value="increase">
        <input type="hidden" name="index" value="<%= i %>">
        <button type="submit">+</button>
      </form>

    </td>
    <td>¥<%= String.format("%.2f", subtotal) %></td>
    <td>
      <form action="UpdateCartServlet" method="post">
        <input type="hidden" name="action" value="remove">
        <input type="hidden" name="index" value="<%= i %>">
        <button type="submit">删除</button>
      </form>
    </td>
  </tr>
  <% } %>
  </tbody>
</table>

<!-- 底部操作栏 -->
<div class="cart-footer">
  <div class="select-all-group">
    <input type="checkbox" id="selectAll" onclick="toggleSelectAll()"> 全选
    <span id="totalPriceDisplay">总价：¥<%= String.format("%.2f", totalAmount) %></span>
  </div>
  <div>
    <a href="/chenweilong_war_exploded/Ans1/index.jsp" class="continue-shopping">继续购物</a>
    <button class="checkout-button" disabled onclick="alert('该功能正在开发中')">结算</button>
  </div>
</div>

<script>
  function toggleSelectAll() {
    var checkboxes = document.querySelectorAll('input[type="checkbox"][name^="item_"]');
    var selectAllCheckbox = document.getElementById('selectAll');
    checkboxes.forEach(function(checkbox) {
      checkbox.checked = selectAllCheckbox.checked;
    });
    updateTotalPrice();
  }

  function updateTotalPrice() {
    var checkboxes = document.querySelectorAll('input[type="checkbox"][name^="item_"]:checked');
    var displayedTotal = 0;

    checkboxes.forEach(function(checkbox) {
      var index = parseInt(checkbox.value);
      var priceCell = document.querySelector('tr:nth-child(' + (index + 1) + ') td:nth-child(6)').innerText.replace('¥', '');
      displayedTotal += parseFloat(priceCell);
    });

    document.getElementById('totalPriceDisplay').innerText = '总价：¥' + displayedTotal.toFixed(2);
  }

  // 给每个商品复选框绑定事件监听
  document.addEventListener('DOMContentLoaded', function () {
    var checkboxes = document.querySelectorAll('input[name^="item_"]');
    checkboxes.forEach(function (checkbox) {
      checkbox.addEventListener('change', updateTotalPrice);
    });
  });
</script>

<% } else { %>
<p>您的购物车为空，请先去选购商品。</p>
<br>
<a class="continue-shopping" href="/chenweilong_war_exploded/Ans1/index.jsp">继续购物</a>
<% } %>
</body>
</html>
